<template>
  <a-modal
    :title="'新增素材'"
    :visible="true"
    width="60%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card>
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <a-form
              :form="form"
              @submit="handleSubmit"
              :labelCol="formItemLayout.labelCol"
              :wrapperCol="formItemLayout.wrapperCol"
            >
              <a-form-item
                label="文件名称"
                :required="true"
              >
                <a-input
                  allow-clear
                  placeholder="请输入文件名称"
                  :maxLength="40"
                  v-decorator="[
                  `name`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入文件名称'
                      }
                    ]
                  }
                ]"
                />
              </a-form-item>

              <a-form-item
                label="素材类型"
                :required="true"
              >
                <a-select
                  allow-clear
                  show-search
                  placeholder="请选择素材类型"
                  optionFilterProp="children"
                  v-decorator="[
                  'type',
                  {
                    rules: [{ required: true, message: '请选择素材类型!' }]
                  }
                ]"
                >
                  <a-select-option
                    :value="item.id"
                    v-for="(item,index)  in typeList"
                    :key="index"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item
                label="微信素材"
                :required="true"
              >
                <a-select
                  allow-clear
                  show-search
                  placeholder="请选择微信素材"
                  optionFilterProp="children"
                  v-decorator="[
                  'saveType',
                  {
                    rules: [{ required: true, message: '请选择微信素材!' }]
                  }
                ]"
                >
                 
                  <a-select-option value="1">
                    永久素材
                  </a-select-option>
                   <a-select-option value="2">
                    临时素材
                  </a-select-option>
                </a-select>
              </a-form-item>
              <a-form-item
                label="选择素材"
                :required="true"
              >

                <a-upload-dragger
                  name="file"
                  :multiple="true"
                  :fileSize="20"
                  list-type="picture"
                  :beforeUpload="beforeUpload"
                  action="https://jic.jnby.com/activity/market-act/common/upload/multipart"
                  v-decorator="[
                  'fileList',
                   {
                  
                    rules: [{ required: true, message: '请上传' }]
                  }
                ]"
                >
                  <p class="ant-upload-drag-icon">
                    <a-icon type="inbox" />
                  </p>
                  <p class="ant-upload-hint">
                    将文件拖到此处，或点击上传
                  </p>
                </a-upload-dragger>
              </a-form-item>
              <a-form-item label="上传须知">
                <span style="font-size: 12px;word-break: break-all;">
                  图片（images）:10M，支持PNG/JPEG/JPG/GIF格式<br>语音（voice）:2M，播放长度不超过60s，支持AMR/MP3格式<br>视频（video）:10M，支持MP4格式<br>缩略图（thumb）:64KB，支持JPG格式
                </span>
              </a-form-item>

              <a-row style="margin-top:10px">
                <a-col
                  :span="16"
                  :offset="18"
                  class="info-action"
                >
                  <a-button @click="clear">
                    重置
                  </a-button>
                  <a-button
                    :style="{ marginLeft: '8px' }"
                    type="primary"
                    html-type="submit"
                    :loading="loading"
                  >
                    保存
                  </a-button>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </div>

  </a-modal>
</template>

<script>
import { postFormData, postAction, getAction } from '@/api/manage'
import { uploadUrl } from '@api/pattern/index.js'
import { axios } from '@/utils/request'

const typeList = [
  {
    id: '1',
    name: '图片'
  },
  {
    id: '2',
    name: '音频'
  },
  {
    id: '3',
    name: '视频'
  },
  {
    id: '4',
    name: '缩略图'
  }
]
export default {
   props: {
    appid: {
      type: String,
      default: null
    },
  },
  data() {
    return {
      urlKey: 'basemgt-wx',
      typeList,
      eventType: [],
      showEn: false,
      showMe: false,
      id: '',
      fieldConfigList: [],
      ischoose: 1,
      roleName: '',
      uploadUrl,
      fileList: [],
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 12 },
          xs: { span: 12 },
          sm: { span: 12 }
        }
      },
      loading: false,
      form: this.$form.createForm(this),
      showTable: false
    }
  },
  mounted() {
  },
  methods: {
    reset() {
      this.form.resetFields()
      this.$emit('close')
    },
    clear() {
      this.form.resetFields()
    },
    beforeUpload(file, fileList) {
      this.fileList = file
      console.log(this.fileList)
    },
    normFile(e) {
      console.log('Upload event:', e)
      if (Array.isArray(e)) {
        return e
      }
      return e && e.fileList
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    submit(values) {
      this.loading = true
      const formData = new FormData()
      formData.append('fileList', this.fileList)
      formData.append('appid', this.appid)
      formData.append('name', values.name)
      formData.append('type', values.type)
      formData.append('saveType', values.saveType)
      const apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
      axios({
        url: apiBaseUrl + '/api/gateway/basemgt-wx/WxMaterial/insertWxMaterial/file/upload',
        method: 'post',
        data: formData,
        contentType: false
        // headers: { 'Content-Type': 'multipart/form-data; boundary=----WebKitFormBoundarynl6gT1BKdPWIejNq' }
      }).then(res=>{
         if(res.code == 200){
           this.$message.success("添加成功")
           this.reset()
         }else{
           this.$message.warning(res.msg)
         }
         this.loading = false
      })
     
    }
  }
}
</script>


